<style lang="less">
  .sign-off-confirm{
  }
</style>

<template>
  <el-dialog title="签收确认" size="tiny" :visible.sync="SignOffTaskVisible"
             :close-on-click-modal="false" class="sign-off-confirm">
    <el-form :model="SignOffTask" :rules="rule" label-width="100px" ref="SignOffTask">
      <el-form-item  v-show="receiptWay ===101002004" label="回单收取" prop="receiptStatus">
        <el-checkbox v-model="SignOffTask.receiptStatus" label="已收取"
                     :true-label="111002001" :false-label="111002002"></el-checkbox>
      </el-form-item>

      <el-form-item  label="签收日期" prop="signOffDate"
                    :rules="[{required: true,type:'date', message: '请选择签收日期', trigger: 'change'}]">
        <el-date-picker
          v-model="SignOffTask.signOffDate"
          type="datetime"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="签收人" required>
        <el-col :span="24">
          <el-col :span="8">
            <el-form-item prop="signOffName" style="margin-bottom: 0px;">
                <el-input v-model="SignOffTask.signOffName" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="signOffIdentityCard" style="margin-bottom: 0px;padding-left: 10px">
                <el-input v-model="SignOffTask.signOffIdentityCard" placeholder="身份证号"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4" >
            <el-form-item style="margin-bottom: 0px;padding-left: 10px">
              <el-checkbox v-model="SignOffTask.isReplace">是否代收</el-checkbox>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form-item>
      <el-form-item label="代收人" required v-if="SignOffTask.isReplace">
        <el-col :span="24">
          <el-col :span="8">
            <el-form-item prop="receiverName" style="margin-bottom: 0px">
              <el-input v-model="SignOffTask.receiverName" placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="receiverIDNumber" style="margin-bottom: 0px;padding-left: 10px">
              <el-input v-model="SignOffTask.receiverIDNumber" placeholder="身份证号"></el-input>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form-item>
      <el-form-item  label="异常签收状态" style="margin-bottom: 5px;">
        <el-checkbox v-model="SignOffTask.isAbnormal" :true-label="111002001"
                     :false-label="111002002">签收异常
        </el-checkbox>
      </el-form-item>
      <el-form-item style="margin-bottom: 5px;" v-if="SignOffTask.isAbnormal === 111002001">
        <el-select v-model="SignOffTask.signOffAbnormal"
                   placeholder="请选择异常类型">
          <el-option
            v-for="item in $store.getters.SIGNOFF_EXCEPTION_TYPE"
            :label="item.cnDictValname"
            :key="item.dictVal"
            :value="item.dictVal">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="SignOffTask.isAbnormal === 111002001">
        <el-input type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3}" v-model="SignOffTask.abnormalExplain"
                  placeholder="请输入异常描述"></el-input>
      </el-form-item>
      <el-form-item label="上传图片" style="margin-bottom: 0px;">
        <el-upload
          list-type="picture-card"
          ref="upload"
          action="/api/v2.0/admin/sign_off_test"
          :on-success="handlePreview"
          :before-upload="beforeAvatarUpload"
          :file-list="fileList">
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2M</div>
        </el-upload>
      </el-form-item>
      <el-form-item style="margin-bottom: 0px;">
        <el-input type="textarea"
                  :autosize="{ minRows: 3, maxRows: 3}" v-model="SignOffTask.remark"
                  placeholder="请输入备注"></el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox v-model="SignOffTask.sendSms">短信通知发货人</el-checkbox>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="SignOffTaskVisible = false">取消</el-button>
      <el-button type="primary" @click.native="saveSignOffTask" :loading="submitLoading">提交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getStmParamByType } from '../../api/system/stmParam.js';
export default {
  name: 'SignOffConfirm',
  componentName: 'SignOffConfirm',
  data () {
    return {
      receiptWay: null,
      SignOffTaskVisible: false,
      SignOffTask: {
        'pictureId': [],
        'signOffName': null,
        'signOffIdentityCard': null,
        'signOffDate': null,
        isReplace: false,
        receiverName: null,
        receiverIDNumber: null,
        'isAbnormal': 111002002,
        'signOffAbnormal': null,
        'abnormalExplain': null,
        'remark': null,
        'receiptStatus': 111002002,
        sendSms: false
      },
      rule: {
        signOffName: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在2 到 15 个字符', trigger: 'blur'}
        ],
        signOffIdentityCard: [{type: 'string', len: 18, message: '身份证长度18位'}],
        receiverIDNumber: [{type: 'string', len: 18, message: '身份证长度18位'}],
        receiverName: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在2 到 15 个字符', trigger: 'blur'}
        ]
      },
      submitLoading: false,
      fileList: []
    };
  },
  props: {
    handleSignOffConfirm: Function
  },
  methods: {
    show (paymentType, collectPaymentAmount, payStatus, receiptWay) {
      this.submitLoading = false;
      this.receiptWay = receiptWay;
      if (payStatus === 101003001 && (paymentType === 102002002 || collectPaymentAmount > 0)) {
        getStmParamByType({
          stmParamType: 'IS_PAY_BEFORE_SIGNOFF'
        }).then((res) => {
          if (res.data.obj.stmParamVal === '0') {
            this.SignOffTaskVisible = false;
            return this.$message.warning('存在款项未收取！请先进行收款确认！');
          } else {
            this.resetForm();
            this.SignOffTask.receiptStatus = 111002002;
            this.SignOffTaskVisible = true;
          }
        });
      } else {
        this.resetForm();
        this.SignOffTask.receiptStatus = 111002002;
        this.SignOffTaskVisible = true;
      }
    },
    // 重置表单
    resetForm () {
      if (this.$refs.SignOffTask) {
        this.$refs.SignOffTask.resetFields();
      }
      this.$ue.resetObjNull(this.SignOffTask);
      this.fileList = [];
      this.SignOffTask.pictureId = [];
      this.SignOffTask.isAbnormal = 111002002;
      this.SignOffTask.isReplace = false;
      this.SignOffTask.sendSms = false;
    },
    handlePreview (file) {
      this.SignOffTask.pictureId.push(file.obj);
    },
    beforeAvatarUpload (file) {
      let isJPG = false;
      if (file.type) {
        const fileTypes = 'image/jpeg;image/png;image/bmp;image/tiff;image/wmf';
        isJPG = fileTypes.indexOf(file.type) !== -1;
      }
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG/BMP/TIFF/WMF 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    hide () {
      this.submitLoading = false;
      this.SignOffTaskVisible = false;
    },
    saveSignOffTask () {
      this.$refs['SignOffTask'].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          this.handleSignOffConfirm(this.SignOffTask);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
};
</script>
